<template>
  <div class="no_data">
    <img v-bind:src="getIconUrl" alt="">
    <p>{{ vueInfo.title }}</p>
  </div>
</template>

<script>
  export default {
    name: 'no_data',
    props: {
      vueInfo: {
        title: '',
        iconUrl: ''
      }
    },
    computed: {
      getIconUrl() {
        let that = this
        console.log('getIconUrl:' + this.$props.vueInfo.iconUrl)
        let url = '../../assets/img/common/no_data.png'
//        return require(that.vueInfo.iconUrl)
        return require('../../assets/img/common/no_data.png')
      }
    },
    created() {
      console.log('created:' + this.$props.vueInfo.iconUrl)
    }
  }
</script>

<style lang="scss">
  div.no_data {
    /*background-color: greenyellow;*/
    margin: 20px auto;
    height: 130px;
    width: 100px;

    >img {
      height: 100px;
      max-width: 100px;
      width: 100%;
      /*background-color: red;*/
    }

    >p {
      position: relative;
      height: 30px;
      line-height: 30px;
      width: 100%;
      text-align: center;
      color: rgb(133, 133, 133);
      font-size: 14px;
      /*background-color: rebeccapurple;*/
    }
  }
</style>
